import { ExternalLinkIcon } from '@radix-ui/react-icons'
import { Canvas, Meta, Source } from '@storybook/blocks'

import * as CardStories from './card.stories'

<Meta of={CardStories} />

# Card

Displays a card with header, content, and footer.

## Preview

<Canvas of={CardStories.Default} />

## Usage

export const importCode = `import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@orbitkit/ui/card"`

export const usageCode = `<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card Description</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Card Content</p>
  </CardContent>
  <CardFooter>
    <p>Card Footer</p>
  </CardFooter>
</Card>
`

<Source code={importCode} language='ts' dark />
<Source code={usageCode} language='tsx' dark />

## Examples

### Default

<Canvas of={CardStories.Default} />
